<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<title>答题详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="/mp/css/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="/mp/css/mm_style.css" media="all">
</head>
<body class="bodyPaddingBottom">
<div class="mHeader">
    <h4 class="fl">第<span id="order" style="float: none;"></span>题</h4>
</div>
<!-- start：题目列表 -->
<div class="content pat140" id="question">
</div>
<div class="content marb160" id="answer">
</div>
<div class="Mbottom tac">
    <span class="page" id="choose"></span>
</div>
<div class="pageBoxBg" style="display: none;">
    <div class="pageBox">
        <ul  class="timuBox" id="options">
        </ul>
    </div>
</div>
<script type="text/javascript" src="/mp/js/mobile.js"></script>
<script type="text/javascript" src="/mp/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/mp/js/common/move.js"></script>
<script type="text/javascript" src="/mp/js/common/common.js"></script>
<script>
    var number = getQueryString("number");
    var resultId = getQueryString("resultId");
    $(function(){
        initDataHistory();
        initOption();
        getData(number-1);
        //up, right, down, left为四个回调函数，分别处理上下左右的滑动事件
        EventUtil.listenTouchDirection(document,true,null,left,null,next);
        $("#options").on("click","li",function () {
            $("#options li").eq($(this).index()).attr("style","color: #fff;background: #3c82e9;border: none;").siblings().removeAttr("style");
            getData(parseInt($(this).text())-1);
        });
        $(".page").bind("click",function(){
            $(".pageBoxBg").toggle();
        });
        $(".page").click(function(){
            $(".Mbottom").toggleClass("datiBottom");
        })

    });
    //左滑
    function left() {
        var currentPage = parseInt($("#order").text());
        if((currentPage)-1>0){
            getData(currentPage-2);
        }
    }
    //右滑
    function next() {
        var currentPage = parseInt($("#order").text());
        var total = JSON.parse(window.localStorage.getItem("resultItem")).length;
        if(currentPage != total){
            getData(currentPage);
        }
    }
    function initDataHistory() {
        var dataItem = JSON.parse(window.localStorage.getItem("specialAnswerItem"));
        window.localStorage.setItem("resultItem",JSON.stringify(dataItem.answer));
    }
    function getData(i) {
        var data = JSON.parse(window.localStorage.getItem("resultItem"));
        if (data.length == 0) {
            $("#question").html('<img src="/mp/images/nothing.png" style="width: 100%;position: fixed;top: 23%">');
            return
        }
        var questionType = data[i].questionType;
        var optionA = data[i].optionA;
        var optionB = data[i].optionB;
        var optionC = data[i].optionC;
        var optionD = data[i].optionD;
        var optionE = data[i].optionE;
        var optionF = data[i].optionF;
        var questionContent = data[i].questionContent;
        var hisOption = data[i].hisOption;
        var questionAnswer = data[i].questionAnswer;
        var questionAnalysis = data[i].questionAnalysis;
        var optionArr = ["A","B","C","D","E","F"];
        var questionArr=[optionA,optionB,optionC,optionD,optionE,optionF];
        var orderId = i + 1;
        if(questionType==2){
            var questionHtml = "<p class='fsSmall30 col3 topicItem padd20'><img src='/mp/images/duoxuan.png' alt='' class='dxIcon'>" + questionContent + "</p> <div class= 'singleRadio padd20'>"
        }else if(questionType==1){
            var questionHtml = "<p class='fsSmall30 col3 topicItem padd20'><img src='/mp/images/dx.png' alt='' class='dxIcon'>" + questionContent + "</p> <div class= 'singleRadio padd20'>"
        }else {
            var questionHtml = "<p class='fsSmall30 col3 topicItem padd20'><img src='/mp/images/pd.png' alt='' class='dxIcon'>" + questionContent + "</p> <div class= 'singleRadio padd20'>"
        }
        if(questionType==2){
            var flag = false;
            if(hisOption){
                var arr = hisOption.split(",");
                flag = true;
            }
            var answerArr = questionAnswer.split(",");
            for(var q in questionArr){
                if(questionArr[q]!="" && questionArr[q]!=null){
                    console.log("arr:"+arr);
                    console.log("optionArr[q]:"+optionArr[q]);
                    if(flag && arr.indexOf(optionArr[q])>-1){
                        questionHtml += "<div class='popCheckOne'><input type='checkbox' value='duoxuan' name='duoxuan' disabled='disabled' checked> <label class='radioStyle'>"+optionArr[q]+"." + questionArr[q] + "</label> </div>"

                    }else{
                        questionHtml += "<div class='popCheckOne'><input type='checkbox' value='duoxuan' name='duoxuan' disabled='disabled' > <label class='radioStyle'>"+optionArr[q]+"." + questionArr[q] + "</label> </div>"
                    }
                }
            }
        }else{
            for(var q in questionArr){
                if(questionArr[q]!="" && questionArr[q]!=null){
                    if(hisOption == optionArr[q]){
                        if(hisOption==questionAnswer){
                            questionHtml += "<div class='radios radioCorrectBox'><input type='radio' value='danxuan' name='danxuan' disabled='disabled' checked> <label class='radioStyle radioCorrect'>"+optionArr[q]+"." + questionArr[q] + "</label> </div>"
                        }else{
                            questionHtml += "<div class='radios radioWrongBox'><input type='radio' value='danxuan' name='danxuan' disabled='disabled' checked> <label class='radioStyle radioWrong'>"+optionArr[q]+"." + questionArr[q] + "</label> </div>"
                        }
                    }else{
                        if(questionAnswer==optionArr[q]){
                            questionHtml += "<div class='radios radioCorrectBox'><input type='radio' value='danxuan' name='danxuan' disabled='disabled' > <label class='radioStyle radioCorrect'>"+optionArr[q]+"." + questionArr[q] + "</label> </div>"
                        }else{
                            questionHtml += "<div class='radios'><input type='radio' value='danxuan' name='danxuan' disabled='disabled' > <label class='radioStyle'>"+optionArr[q]+"." + questionArr[q] + "</label> </div>"
                        }

                    }
                }
            }
        }
        questionHtml += '</div>';
        var answerHtml = "<div class='answerDetail'> <h6>正确答案：" + questionAnswer + "</h6> <p>答案解析：" + questionAnalysis + "</p> </div>"
        $("#order").text(orderId);
        $("#question").html(questionHtml);
        $("#answer").html(answerHtml);
        $("#choose").html("<img src='/mp/images/page.png'>" + orderId + "/" + data.length + "");
        $("#question").hide();
        $("#question").fadeIn(500);
        window.scrollTo(0,0);
    }
    function initOption() {
        var data = JSON.parse(window.localStorage.getItem("resultItem"));
        var optionsHtml = "";
        for (a = 0; a < data.length; a++) {
            var optionId = a + 1;
            if(data[a].hisOption==""){
                optionsHtml += "<li class='weidaTi iphoneModel'>" + optionId + "</li>";
            }else if(data[a].hisOption==data[a].questionAnswer){
                optionsHtml += "<li class='correctTi iphoneModel'>" + optionId + "</li>";
            }else{
                optionsHtml += "<li class='wrongTi iphoneModel'>" + optionId + "</li>";
            }
        }
        $("#options").html(optionsHtml);
    }
</script>
</body>
</html>